<template>
  <div v-loading="submitLoading" element-loading-text="处理中，请稍后...">
    <div class="main2-container">
      <el-steps :active="stepActive" simple>
        <el-step icon="el-icon-edit">
          <div slot="title" style="font-size: 18px; font-weight: bolder">
            1、进修科目确认
          </div>
        </el-step>
        <el-step icon="el-icon-edit">
          <div slot="title" style="font-size: 18px; font-weight: bolder">
            2、个人信息填报
          </div>
        </el-step>
        <el-step icon="el-icon-edit">
          <div slot="title" style="font-size: 18px; font-weight: bolder">
            3、申请材料提交
          </div>
        </el-step>
      </el-steps>
    </div>
    <div style="padding-bottom: 100px">
      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <div v-show="stepActive == 1">
          <div class="main2-container">
            <div class="header-title">选送单位</div>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="原单位/医院名称" prop="unitHospitalName">
                  <el-input
                    v-model="form.unitHospitalName"
                    placeholder="请输入原单位/医院名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="申请人姓名" prop="applicantName">
                  <el-input
                    v-model="form.applicantName"
                    placeholder="请输入申请人姓名"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="main2-container">
            <div class="header-title">进修科目</div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="进修科目" required="">
                  {{ entity.registerDeptName || "" }}
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="entity.registerEnter">
                <el-form-item label="最低录取资格" prop="">
                  {{ entity.registerEnter }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="招生类型" prop="" v-if="false">
                  {{ entity.registerTypeName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="进修形式" prop="educationType">
                  <span>{{ form.educationType }}</span>
                  <!-- <el-select
                    v-model="form.educationType"
                    placeholder="请选择进修形式"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in consts.educationTypeList"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="招生批次" prop="batchName">
                  <el-select
                    v-model="form.batchName"
                    placeholder="请选择招生批次"
                    filterable
                    clearable
                    @change="batchNameChange"
                  >
                    <el-option
                      v-for="(item, index) in batchNameList"
                      :key="index"
                      :disabled="!item.useStatus"
                      :label="
                        item.year +
                        '年' +
                        item.name +
                        '批次' +
                        (!item.useStatus ? '(不在报名时间范围)' : '')
                      "
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="进修期限" prop="durationName">
                  <el-radio-group
                    v-model="form.durationName"
                    @change="durationNameChange"
                    disabled
                  >
                    <el-radio
                      v-for="(item, index) in durationNameList"
                      :key="index"
                      :label="item.name"
                      >{{ item.name }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="form.durationMoney">
                <el-form-item label="进修费用" prop="durationMoney">
                  {{ form.durationMoney }}
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="进修时间" prop="durationMoney">
                  <span
                    >{{ form.durationStartDate }}-{{
                      form.durationEndDate
                    }}</span
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="main2-container" v-if="checkId">
            <div class="header-title">显微血管缝合操作培训：</div>
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item
                  label="显微血管缝合操作培训"
                  prop="joinMicrosutureTrain"
                >
                  <el-radio-group v-model="form.joinMicrosutureTrain">
                    <el-radio :label="1">参加培训（费用2800）</el-radio>
                    <el-radio :label="0">不参加培训</el-radio>
                  </el-radio-group>
                </el-form-item>
                <div
                  style="
                    color: #999;
                    margin-top: 10px;
                    margin-left: 47px;
                    font-size: 14px;
                  "
                >
                  我科每年为前来进修的医师提供一次显微血管缝合操作培训（为期5天），由血管组专家授课并带教指导，
                  培训地点在西院颅底解剖实验室，上半年安排在4或5月，下半年在10或11月举行，为期5天（周一至周五全脱产练习），
                  培训费用2800元，培训费用计入进修费，自愿报名。有意愿的请务必在报名申请时确认，并勾选相关选项。
                </div>
                <div
                  v-if="form.joinMicrosutureTrain == 1"
                  style="
                    color: #999;
                    margin-top: 30px;
                    margin-left: 47px;
                    font-size: 14px;
                  "
                >
                  进修费用:{{
                    form.durationMoney
                  }}(进修费)+2800(显微血管缝合操作培训费)，共计{{
                    Number(form.durationMoney) + 2800
                  }}元。
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="main2-container">
            <div class="header-title">进修要求与目的（限制300字内）</div>
            <el-form-item label="" prop="educationAskObjective" label-width="0">
              <el-input
                :rows="10"
                type="textarea"
                maxlength="300"
                v-model="form.educationAskObjective"
                placeholder="请输入进修要求与目的"
              />
            </el-form-item>
          </div>
        </div>
        <div v-show="stepActive == 2">
          <div class="main2-container">
            <div class="header-title">个人信息</div>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="姓名" prop="userName">
                  <el-input v-model="form.userName" placeholder="请输入姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="form.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="民族" prop="nation">
                  <el-select
                    v-model="form.nation"
                    placeholder="请选择民族"
                    filterable
                    clearable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in consts.nationList"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="从事专业" prop="profession">
                  <el-input
                    v-model="form.profession"
                    placeholder="请输入从事专业"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="政治面貌" prop="politicalOutlook">
                  <el-select
                    v-model="form.politicalOutlook"
                    placeholder="请选择政治面貌"
                    filterable
                    clearable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in consts.politicalOutlookList"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="健康状况" prop="healthCondition">
                  <el-select
                    v-model="form.healthCondition"
                    placeholder="请选择健康状况"
                    filterable
                    clearable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in consts.healthConditionList"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职称" prop="technicalTitle">
                  <el-select
                    v-model="form.technicalTitle"
                    placeholder="请选择职称"
                    filterable
                    clearable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in consts.technicalTitleList"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职务" prop="duties">
                  <el-input v-model="form.duties" placeholder="请输入职务" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证件类型" prop="idCardType">
                  <el-select
                    v-model="form.idCardType"
                    placeholder="请选择证件类型"
                    filterable
                    clearable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in consts.idCardTypeList"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证件号码" prop="idCard">
                  <el-input
                    v-model="form.idCard"
                    placeholder="请输入证件号码"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出生日期" prop="birthday">
                  <el-date-picker
                    style="width: 100%"
                    v-model="form.birthday"
                    type="date"
                    placeholder="请选择出生日期"
                    format="yyyy/MM/dd"
                    value-format="yyyy/MM/dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年龄" prop="age">
                  <el-input
                    type="number"
                    v-model.number="form.age"
                    placeholder="请输入年龄"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最高学历" prop="highestDegree">
                  <el-select
                    v-model="form.highestDegree"
                    placeholder="请选择最高学历"
                    filterable
                    clearable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in consts.highestDegreeList"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="毕业院校" prop="graduateSchool">
                  <el-input
                    v-model="form.graduateSchool"
                    placeholder="请输入毕业院校"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="何时参加工作" prop="startWorking">
                  <el-date-picker
                    style="width: 100%"
                    v-model="form.startWorking"
                    type="date"
                    placeholder="请选择何时参加工作"
                    format="yyyy/MM/dd"
                    value-format="yyyy/MM/dd"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="何时获得职业资格证书"
                  prop="doctorCertificateDate"
                >
                  <el-date-picker
                    style="width: 100%"
                    v-model="form.doctorCertificateDate"
                    type="date"
                    placeholder="请选择何时获得职业资格证书"
                    format="yyyy/MM/dd"
                    value-format="yyyy/MM/dd"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="资格证书编号"
                  prop="doctorCertificateNumber"
                >
                  <el-input
                    v-model="form.doctorCertificateNumber"
                    placeholder="请输入资格证书编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="执业证书编号"
                  prop="practicingCertificateNumber"
                >
                  <el-input
                    v-model="form.practicingCertificateNumber"
                    placeholder="请输入执业证书编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="操作设备的名称">
                  <el-input
                    v-model="form.operatingDevice"
                    placeholder="请输入操作设备的名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="是否从事放射诊疗技术岗位"
                  prop="engagedRadiatePost"
                >
                  <el-radio-group v-model="form.engagedRadiatePost">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="main2-container">
            <div class="header-title">联系方式</div>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="手机号码" prop="phoneNumber">
                  <el-input
                    v-model="form.phoneNumber"
                    placeholder="请输入手机号码"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="form.email" placeholder="请输入邮箱" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位电话" prop="workTelephone">
                  <el-input
                    v-model="form.workTelephone"
                    placeholder="请输入单位电话"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮编" prop="zipCode">
                  <el-input v-model="form.zipCode" placeholder="请输入邮编" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div style="display: flex">
                  <el-form-item label="单位等级" prop="unitLevel">
                    <el-select
                      v-model="form.unitLevel"
                      placeholder="请选择单位等级"
                      filterable
                      clearable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in consts.unitLevelList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label=""
                    prop="hospitalLevel"
                    label-width="0"
                    style="margin-left: 15px"
                  >
                    <el-select
                      v-model="form.hospitalLevel"
                      placeholder="请选择医院等级"
                      filterable
                      clearable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in consts.hospitalLevelList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位名称" prop="unitName">
                  <el-input
                    v-model="form.unitName"
                    placeholder="请输入单位名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div style="display: flex">
                  <el-form-item label="单位地址(省市区)" prop="unitProvince">
                    <el-select
                      v-model="form.unitProvince"
                      filterable
                      placeholder="请选择省份"
                      @change="provinceChange"
                    >
                      <el-option
                        v-for="item in provinces"
                        :key="item.id"
                        :label="item.extName"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="unitCity">
                    <el-select
                      v-model="form.unitCity"
                      filterable
                      placeholder="请选择城市"
                      :disabled="!form.unitProvince"
                      @change="cityChange"
                    >
                      <el-option
                        v-for="item in availableCities"
                        :key="item.id"
                        :label="item.extName"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="unitDistrict">
                    <el-select
                      v-model="form.unitDistrict"
                      filterable
                      @change="contryChange"
                      prop="unitDistrict"
                      placeholder="请选择县区"
                      :disabled="!form.unitCity"
                    >
                      <el-option
                        v-for="item in availableCounties"
                        :key="item.id"
                        :label="item.extName"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <el-form-item label="详细地址" prop="unitAddress">
                  <el-input
                    v-model="form.unitAddress"
                    placeholder="请输入详细地址"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="main2-container">
            <div class="header-title">政治表现（限制300字内）</div>
            <el-form-item
              label=""
              prop="politicalRepresentation"
              label-width="0"
            >
              <el-input
                :rows="10"
                type="textarea"
                maxlength="300"
                v-model="form.politicalRepresentation"
                placeholder="请输入政治表现"
              />
            </el-form-item>
          </div>
          <div class="main2-container">
            <div class="header-title">
              拟进修专业方面的工作基础（限制200字内）
            </div>
            <el-form-item label="" prop="proposedMajor" label-width="0">
              <el-input
                :rows="10"
                type="textarea"
                maxlength="200"
                v-model="form.proposedMajor"
                placeholder="请输入拟进修专业方面的工作基础"
              />
            </el-form-item>
          </div>
          <div class="main2-container" style="text-align: center">
            <div class="header-title">学习经历（从大学起）</div>
            <div
              class="item-box"
              v-for="(learn, index) in registerLearnVoList"
              :key="index"
            >
              <el-row :gutter="15">
                <el-col :span="12">
                  <div style="display: flex">
                    <el-form-item label="学习时间">
                      <el-date-picker
                        style="width: 100%"
                        v-model="learn.startDate"
                        @change="handleDateChange(index)"
                        type="date"
                        placeholder="请选择开始时间"
                        format="yyyy/MM/dd"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item
                      label=""
                      label-width="0"
                      style="margin-left: 15px"
                    >
                      <el-date-picker
                        style="width: 100%"
                        v-model="learn.endDate"
                        @change="handleDateChange(index)"
                        :picker-options="pickerOptions"
                        type="date"
                        placeholder="请选择结束时间"
                        format="yyyy/MM/dd"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="学校名称" required>
                    <el-input
                      v-model="learn.schoolName"
                      placeholder="请输入学校名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="院系名称" required>
                    <el-input
                      v-model="learn.professionName"
                      placeholder="请输入院系名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="专业名称" required>
                    <el-input
                      v-model="learn.designationName"
                      placeholder="请输入专业名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="学历" required>
                    <el-select
                      v-model="learn.education"
                      @change="educationChange(index)"
                      placeholder="请选择学历"
                      filterable
                      clearable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in consts.highestDegreeList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="学位"
                    required
                    v-if="learn.education != '专科'"
                  >
                    <el-select
                      v-model="learn.academicDegree"
                      placeholder="请选择学位"
                      filterable
                      clearable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in consts.academicDegreeList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="registerLearnDelete(index)"
                  ></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="registerLearnAdd"
              >添加学习经历</el-button
            >
          </div>
          <div class="main2-container" style="text-align: center">
            <div class="header-title">工作经历</div>
            <div
              class="item-box"
              v-for="(work, index) in registerWorkVoList"
              :key="index"
            >
              <el-row :gutter="15">
                <el-col :span="12">
                  <div style="display: flex; align-items: center">
                    <el-form-item label="工作时间" required>
                      <el-date-picker
                        style="width: 150px"
                        v-model="work.startDate"
                        @change="handleDateChangeWork(index)"
                        type="date"
                        placeholder="选择开始时间"
                        format="yyyy/MM/dd"
                        value-format="yyyy/MM/dd"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item
                      label=""
                      label-width="0"
                      style="margin-left: 15px"
                    >
                      <el-date-picker
                        style="width: 150px"
                        v-model="work.endDate"
                        @change="handleDateChangeWork(index)"
                        type="date"
                        :disabled="work.isToDate"
                        :picker-options="pickerOptions"
                        placeholder="选择结束时间"
                        format="yyyy/MM/dd"
                        value-format="yyyy/MM/dd"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <div style="margin-bottom: 22px; margin-left: 10px">
                      <el-checkbox
                        v-model="work.isToDate"
                        @change="changeDate($event, index)"
                        >至今</el-checkbox
                      >
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div style="display: flex">
                    <el-form-item label="单位等级" required>
                      <el-select
                        v-model="work.hospitalLevel"
                        placeholder="请选择等级"
                        filterable
                        clearable
                        style="width: 100%"
                      >
                        <el-option
                          v-for="(item, index) in consts.unitLevelList"
                          :key="index"
                          :label="item.name"
                          :value="item.name"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      label=""
                      label-width="0"
                      style="margin-left: 15px"
                    >
                      <el-select
                        v-model="work.hospitalTwoLevel"
                        placeholder="请选择等级"
                        filterable
                        clearable
                        style="width: 100%"
                      >
                        <el-option
                          v-for="(item, index) in consts.hospitalLevelList"
                          :key="index"
                          :label="item.name"
                          :value="item.name"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="单位名称" required>
                    <el-input
                      v-model="work.hospitalName"
                      placeholder="请输入单位名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="科室名称" required>
                    <el-input
                      v-model="work.deptName"
                      placeholder="请输入科室名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="职称" required>
                    <el-select
                      v-model="work.technicalTitle"
                      placeholder="请选择职称"
                      filterable
                      clearable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in consts.technicalTitleList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="职务" required>
                    <el-input v-model="work.duties" placeholder="请输入职务" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="registerWorkDelete(index)"
                  ></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="registerWorkAdd"
              >添加工作经历</el-button
            >
          </div>
          <div class="main2-container" style="text-align: center">
            <div class="header-title">外语水平</div>
            <div
              class="item-box"
              v-for="(language, index) in form.registerLanguageVoList"
              :key="index"
            >
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-form-item label="外语语种" prop="languages">
                    <el-select
                      v-model="language.languages"
                      placeholder="请选择外语语种"
                      filterable
                      clearable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in consts.languagesList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="读写能力" prop="literacy">
                    <el-select
                      v-model="language.literacy"
                      placeholder="请选择读写能力"
                      filterable
                      clearable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in consts.literacyList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="听说能力" prop="listenAndSpeak">
                    <el-select
                      v-model="language.listenAndSpeak"
                      placeholder="请选择听说能力"
                      filterable
                      clearable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in consts.listenAndSpeakList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="registerLanguageDelete(index)"
                  ></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="registerLanguageAdd"
              >添加语言能力</el-button
            >
          </div>
        </div>
        <div v-show="stepActive == 3">
          <div class="main2-container">
            <div class="header-title">上传注意事项</div>
            <div
              style="padding: 15px; background-color: #eee; line-height: 30px"
            >
              <div>在线申请说明：</div>
              <div>· 以下所有上传的附件请扫描原件或拍照后上传。</div>
              <div>· 执业证书上传时，有最新注册时间的那一页，请务必上传。</div>
              <div>· 上传图片大小，请尽量控制在5M以内。</div>
              <div>
                ·
                进修申请表：若签字盖章后发现内容填写错误，请在系统内重新修改个人信息后，再次下载申请表模板进行打印签字。
              </div>
              <div>
                ·
                由派送单位分管职能部门签署意见并加盖单位公章后，申请学员于系统内扫描上传。
              </div>
              <div>· 请确保上传的进修申请表内容与系统上填写的内容一致!</div>
            </div>
          </div>
          <div class="main2-container image-box">
            <div class="header-title">
              <div>进修申请表</div>
              <div class="desc">
                （<span class="red">要求</span
                >：请下载本批次进修申请表模板，由医院管理部门签字盖章后拍照上传）
              </div>
              <div class="download" @click="downloadApplyTemplate">
                申请表模板下载
              </div>
            </div>
            <el-form-item
              label=""
              prop="registerApplicationForm"
              label-width="0"
            >
              <image-upload v-model="form.registerApplicationForm" />
            </el-form-item>
          </div>
          <div class="main2-container image-box">
            <div class="header-title">
              <div>毕业证书</div>
              <div class="desc">
                （<span class="red">要求</span>：请将毕业证书原件拍照后上传）
              </div>
            </div>
            <el-form-item label="" prop="diploma" label-width="0">
              <image-upload v-model="form.diploma" />
            </el-form-item>
          </div>
          <div class="main2-container image-box">
            <div class="header-title">
              <div>医疗机构等级图片</div>
              <div class="desc">
                （<span class="red">要求</span
                >：请上传医疗机构等级查询结果图片，查询网址：
              </div>
              <a
                class="download"
                target="_blank"
                href="https://zgcx.nhc.gov.cn/unit"
                >https://zgcx.nhc.gov.cn/unit</a
              >
              <div class="desc">)</div>
            </div>
            <el-form-item
              label=""
              prop="medicalInstitutionLevel"
              label-width="0"
            >
              <image-upload v-model="form.medicalInstitutionLevel" />
            </el-form-item>
          </div>
          <div class="main2-container image-box">
            <div class="header-title">
              <div>资格证书</div>
              <div class="desc">
                （<span class="red">要求</span
                >：请完整上传资格证书：姓名页、照片页）
              </div>
            </div>
            <el-form-item label="" prop="qualification" label-width="0">
              <image-upload v-model="form.qualification" />
            </el-form-item>
          </div>
          <div class="main2-container image-box">
            <div class="header-title">
              <div>执业证书</div>
              <div class="desc">
                （<span class="red">要求</span>：请完整上传执业证书）
              </div>
            </div>
            <el-form-item label="" prop="practicingCertificate" label-width="0">
              <image-upload v-model="form.practicingCertificate" />
            </el-form-item>
          </div>
          <div class="main2-container image-box">
            <div class="header-title">
              <div>执业注册信息查询结果</div>
            </div>
            <div style="font-size: 16px; margin-bottom: 15px">
              （<span style="color: #a52529">要求</span>： 医生执业注册查询：
              <a
                target="_blank"
                href="https://zgcx.nhc.gov.cn/doctor"
                style="color: #409eff"
                >https://zgcx.nhc.gov.cn/doctor</a
              >； 护士执业注册查询：
              <a
                target="_blank"
                href="https://zgcx.nhc.gov.cn/nurse"
                style="color: #409eff"
                >https://zgcx.nhc.gov.cn/nurse</a
              >）
            </div>
            <el-form-item label="" prop="practiceResult" label-width="0">
              <image-upload v-model="form.practiceResult" />
            </el-form-item>
          </div>
          <div class="main2-container image-box">
            <div class="header-title">
              <div>职称证书</div>
              <div class="desc">
                （<span class="red">要求</span
                >：请上传职称证书图片，若无证书请上传空白图片）
              </div>
            </div>
            <el-form-item
              label=""
              prop="professionalTitleCertificate"
              label-width="0"
            >
              <image-upload v-model="form.professionalTitleCertificate" />
            </el-form-item>
          </div>
          <div class="main2-container image-box">
            <div class="header-title">
              <div>身份证</div>
              <div class="desc">
                （<span class="red">要求</span>：请上传身份证的正、反面）
              </div>
            </div>
            <div style="display: flex">
              <el-form-item
                label="身份证正面"
                prop="idCardFront"
                label-width="100"
              >
                <image-upload v-model="form.idCardFront" :limit="1" />
              </el-form-item>
              <el-form-item
                label="身份证背面"
                prop="idCardBack"
                label-width="100"
                style="margin-left: 50px"
              >
                <image-upload v-model="form.idCardBack" :limit="1" />
              </el-form-item>
            </div>
          </div>
          <div class="main2-container image-box">
            <div class="header-title">
              <div>电子证件照</div>
              <div class="desc">
                （<span class="red">要求</span
                >：请上传一寸或二寸免冠（不戴帽子）正面照，格式：jpg、jpeg、png，图片大小不超过2M）
              </div>
            </div>
            <el-form-item label="" prop="electronicIdPhoto" label-width="0">
              <image-upload
                v-model="form.electronicIdPhoto"
                :file-size="2"
                :limit="1"
              />
            </el-form-item>
          </div>
          <div class="main2-container image-box">
            <div class="header-title">
              <div>其他补充附件</div>
            </div>
            <el-form-item label="" prop="otherAttachment" label-width="0">
              <image-upload v-model="form.otherAttachment" :file-size="2" />
            </el-form-item>
          </div>
        </div>

        <div class="bottom-box" style="text-align: center">
          <el-button type="primary" plain @click="stopForm">暂 存</el-button>
          <el-button
            type="primary"
            plain
            v-if="stepActive > 1"
            @click="stepActivePrev"
            >上一步</el-button
          >
          <el-button
            type="primary"
            plain
            v-if="stepActive < 3"
            @click="stepActiveNext"
            >下一步</el-button
          >
          <el-button
            type="primary"
            @click="noticeShow = true"
            v-if="stepActive == 3"
            >提交资料</el-button
          >
        </div>
      </el-form>
    </div>

    <!-- 提交报名 -->
    <el-dialog
      class="notice"
      :visible.sync="noticeShow"
      width="600px"
      center
      :close-on-click-modal="false"
    >
      <div slot="title" class="title">系统提示</div>
      <div class="content">
        <img src="@/assets/images/notice.png" width="100px" height="100px" />
        <div style="font-weight: bolder">
          请确认所有填报信息和上传附件准确完整
        </div>
        <div>确保所填信息真实有效</div>
      </div>
      <div slot="footer">
        <el-button type="primary" plain @click="noticeShow = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitForm">确 认</el-button>
      </div>
    </el-dialog>

    <el-dialog
      class="notice"
      :visible.sync="finishShow"
      width="600px"
      center
      :close-on-click-modal="false"
    >
      <div slot="title" class="title">系统提示</div>
      <div class="content">
        <i class="el-icon-success" style="font-size: 68px; color: #67c23a"></i>
        <div style="font-weight: bolder">提交成功</div>
        <div>在我的“个人中心---我的申请”中可查看审批进度，请注意查收短信</div>
        <div>请您持续关注~</div>
      </div>
      <div slot="footer">
        <el-button type="primary" plain @click="finishCancel">取 消</el-button>
        <el-button type="primary" @click="finishSuccess">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { consts } from "@/api/business/consts";
import {
  addRegisterInfo,
  getArea,
  getChildArea,
  getRegisterInfo,
} from "@/api/business/registerInfo";
import { getRegisterNeed } from "@/api/business/registerNeed";
import { checkregisterNeedId, isEmpty } from "@/utils/validate";

import { formatDate } from "@/utils/index";

export default {
  name: "registerInfoUpdate",
  data() {
    return {
      month: 1,
      baseURL: process.env.VUE_APP_BASE_API,
      currYear: new Date().getFullYear(),
      stepActive: 1,
      // 表单参数
      entity: {},
      batchList: [],
      batchNameList: [],
      durationList: [],
      durationNameList: [],
      // 进修期限类型 1-按月 2-按日
      durationNameType: 1,
      durationDateList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      // 表单参数
      form: {
        id: null,
        registerNeedId: null,
        registerDeptId: null,
        registerTypeId: null,
        registerEnter: null,
        unitHospitalName: null,
        applicantName: null,
        registerYear: null,
        batchName: null,
        batchDate: null,
        educationType: consts.educationTypeList[0].name,
        durationName: null,
        joinMicrosutureTrain: null,
        durationMoney: null,
        durationStartDate: null,
        durationEndDate: null,
        educationAskObjective: null,
        userName: null,
        gender: null,
        nation: null,
        profession: null,
        politicalOutlook: null,
        healthCondition: null,
        technicalTitle: null,
        duties: null,
        idCardType: null,
        idCard: null,
        birthday: null,
        age: null,
        highestDegree: null,
        graduateSchool: null,
        startWorking: null,
        doctorCertificateDate: null,
        doctorCertificateNumber: null,
        practicingCertificateNumber: null,
        operatingDevice: null,
        engagedRadiatePost: null,
        phoneNumber: "",
        email: null,
        workTelephone: null,
        zipCode: null,
        unitLevel: null,
        hospitalLevel: null,
        unitName: null,
        unitProvince: null,
        unitCity: null,
        unitDistrict: null,
        unitAddress: null,
        politicalRepresentation: null,
        proposedMajor: null,
        registerApplicationForm: null,
        diploma: null,
        medicalInstitutionLevel: null,
        qualification: null,
        practicingCertificate: null,
        practiceResult: null,
        professionalTitleCertificate: null,
        idCardFront: null,
        idCardBack: null,
        electronicIdPhoto: null,
        otherAttachment: null,
        auditStatus: 0,

        // 外语水平
        registerLanguageVoList: [],
      },
      // 学习经历
      registerLearnVoList: [],
      // 工作经历
      registerWorkVoList: [],
      // 表单校验
      rules: {
        id: [
          {
            required: true,
            message: "主键不能为空",
            trigger: ["blur", "change"],
          },
        ],
        userId: [
          {
            required: true,
            message: "用户ID不能为空",
            trigger: ["blur", "change"],
          },
        ],
        agentUserId: [
          {
            required: true,
            message: "代理申请用户ID不能为空",
            trigger: ["blur", "change"],
          },
        ],
        joinMicrosutureTrain: [
          {
            required: true,
            type: "number",
            message: "是否参加显微外科培训不能为空",
            trigger: ["blur", "change"],
          },
        ],
        registerNeedId: [
          {
            required: true,
            message: "招生信息ID不能为空",
            trigger: ["blur", "change"],
          },
        ],
        unitHospitalName: [
          {
            required: true,
            message: "原单位/医院名称不能为空",
            trigger: ["blur", "change"],
          },
        ],
        applicantName: [
          {
            required: true,
            message: "申请人姓名不能为空",
            trigger: ["blur", "change"],
          },
        ],
        batchName: [
          {
            required: true,
            message: "招生批次不能为空",
            trigger: ["blur", "change"],
          },
        ],
        batchDate: [
          {
            required: true,
            message: "招生截止时间不能为空",
            trigger: ["blur", "change"],
          },
        ],
        educationType: [
          {
            required: true,
            message: "进修形式不能为空",
            trigger: ["blur", "change"],
          },
        ],
        durationName: [
          {
            required: true,
            message: "进修期限不能为空",
            trigger: ["blur", "change"],
          },
        ],
        durationMoney: [
          {
            required: false,
            message: "进修费用不能为空",
            trigger: ["blur", "change"],
          },
        ],
        durationStartDate: [
          {
            required: true,
            message: "进修开始时间不能为空",
            trigger: ["blur", "change"],
          },
        ],
        durationEndDate: [
          {
            required: true,
            message: "进修结束时间不能为空",
            trigger: ["blur", "change"],
          },
        ],
        educationAskObjective: [
          {
            required: true,
            message: "进修要求与目的不能为空",
            trigger: ["blur", "change"],
          },
        ],
        userName: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: ["blur", "change"],
          },
        ],
        gender: [
          {
            required: true,
            type: "number",
            message: "性别不能为空",
            trigger: ["blur", "change"],
          },
        ],
        nation: [
          {
            required: true,
            message: "民族不能为空",
            trigger: ["blur", "change"],
          },
        ],
        profession: [
          {
            required: true,
            message: "从事专业不能为空",
            trigger: ["blur", "change"],
          },
        ],
        politicalOutlook: [
          {
            required: true,
            message: "政治面貌不能为空",
            trigger: ["blur", "change"],
          },
        ],
        healthCondition: [
          {
            required: true,
            message: "健康状况不能为空",
            trigger: ["blur", "change"],
          },
        ],
        technicalTitle: [
          {
            required: true,
            message: "职称不能为空",
            trigger: ["blur", "change"],
          },
        ],
        duties: [
          {
            required: true,
            message: "职务不能为空",
            trigger: ["blur", "change"],
          },
        ],
        idCardType: [
          {
            required: true,
            message: "证件类型不能为空",
            trigger: ["blur", "change"],
          },
        ],
        idCard: [
          {
            required: true,
            message: "证件号码不能为空",
            trigger: ["blur", "change"],
          },
        ],
        birthday: [
          {
            required: true,
            message: "出生日期不能为空",
            trigger: ["blur", "change"],
          },
        ],
        age: [
          {
            required: true,
            type: "number",
            message: "年龄不能为空",
            trigger: ["blur", "change"],
          },
        ],
        highestDegree: [
          {
            required: true,
            message: "最高学历不能为空",
            trigger: ["blur", "change"],
          },
        ],
        graduateSchool: [
          {
            required: true,
            message: "毕业院校不能为空",
            trigger: ["blur", "change"],
          },
        ],
        startWorking: [
          {
            required: true,
            message: "何时参加工作不能为空",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              //  时间不能超过当前使劲按
              if (new Date(value).getTime() > new Date().getTime()) {
                callback(new Error("不能超过当前时间"));
              } else {
                callback();
              }
            },
          },
        ],
        doctorCertificateDate: [
          {
            required: true,
            message: "何时获得职业资格证书不能为空",
            trigger: ["blur", "change"],
          },
        ],
        doctorCertificateNumber: [
          {
            required: true,
            message: "资格证书编号不能为空",
            trigger: ["blur", "change"],
          },
        ],
        practicingCertificateNumber: [
          {
            required: true,
            message: "执业证书编号不能为空",
            trigger: ["blur", "change"],
          },
        ],
        operatingDevice: [
          {
            required: true,
            message: "操作设备的名称不能为空",
            trigger: ["blur", "change"],
          },
        ],
        engagedRadiatePost: [
          {
            required: true,
            type: "number",
            message: "是否从事放射诊疗技术岗位不能为空",
            trigger: ["blur", "change"],
          },
        ],
        phoneNumber: [
          {
            required: true,
            message: "手机号码不能为空",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              // 并且得是数字
              const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
              if (!reg.test(value)) {
                callback(new Error("手机号码格式不正确"));
              } else {
                callback();
              }
            },
          },
        ],
        email: [
          {
            required: true,
            message: "邮箱不能为空",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              const reg =
                /^[A-Za-z0-9_\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
              if (!reg.test(value)) {
                callback(new Error("邮箱格式不正确"));
              } else {
                callback();
              }
            },
          },
        ],
        workTelephone: [
          {
            required: true,
            message: "单位电话不能为空",
            trigger: ["blur", "change"],
          },
        ],
        zipCode: [
          {
            required: true,
            message: "邮编不能为空",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              const reg = /^[0-9]{6}$/;
              if (!reg.test(value)) {
                callback(new Error("邮编不正确"));
              } else {
                callback();
              }
            },
          },
        ],
        unitLevel: [
          {
            required: true,
            message: "单位等级不能为空",
            trigger: ["blur", "change"],
          },
        ],
        hospitalLevel: [
          {
            required: true,
            message: "医院级别不能为空",
            trigger: ["blur", "change"],
          },
        ],
        unitName: [
          {
            required: true,
            message: "单位名称不能为空",
            trigger: ["blur", "change"],
          },
        ],
        unitProvince: [
          {
            required: true,
            message: "单位地址(省)不能为空",
            trigger: ["blur", "change"],
          },
        ],
        unitCity: [
          {
            required: true,
            message: "单位地址(市)不能为空",
            trigger: ["blur", "change"],
          },
        ],
        unitDistrict: [
          {
            required: true,
            message: "单位地址(区)不能为空",
            trigger: ["blur", "change"],
          },
        ],
        unitAddress: [
          {
            required: true,
            message: "详细地址不能为空",
            trigger: ["blur", "change"],
          },
        ],
        politicalRepresentation: [
          {
            required: true,
            message: "政治表现不能为空",
            trigger: ["blur", "change"],
          },
        ],
        proposedMajor: [
          {
            required: true,
            message: "拟进修专业方面的工作基础不能为空",
            trigger: ["blur", "change"],
          },
        ],
        registerApplicationForm: [
          {
            required: true,
            message: "进修申请表不能为空",
            trigger: ["blur", "change"],
          },
        ],
        diploma: [
          {
            required: true,
            message: "毕业证书不能为空",
            trigger: ["blur", "change"],
          },
        ],
        medicalInstitutionLevel: [
          {
            required: true,
            message: "医疗机构等级图片不能为空",
            trigger: ["blur", "change"],
          },
        ],
        qualification: [
          {
            required: true,
            message: "资格证书不能为空",
            trigger: ["blur", "change"],
          },
        ],
        practicingCertificate: [
          {
            required: true,
            message: "执业证书不能为空",
            trigger: ["blur", "change"],
          },
        ],
        practiceResult: [
          {
            required: true,
            message: "执业注册信息查询结果不能为空",
            trigger: ["blur", "change"],
          },
        ],
        professionalTitleCertificate: [
          {
            required: true,
            message: "职称证书不能为空",
            trigger: ["blur", "change"],
          },
        ],
        idCardFront: [
          {
            required: true,
            message: "身份证正面不能为空",
            trigger: ["blur", "change"],
          },
        ],
        idCardBack: [
          {
            required: true,
            message: "身份证背面不能为空",
            trigger: ["blur", "change"],
          },
        ],
        electronicIdPhoto: [
          {
            required: true,
            message: "电子证件照不能为空",
            trigger: ["blur", "change"],
          },
        ],
        // otherAttachment: [
        //   { required: false, message: '其他补充附件不能为空', trigger: ['blur', 'change'] }
        // ],
        auditStatus: [
          {
            required: true,
            message: "审核状态不能为空",
            trigger: ["blur", "change"],
          },
        ],
      },
      unitCodes: [],
      consts: consts,
      noticeShow: false,
      finishShow: false,
      submitLoading: false,
      provinces: [], // 省份数据
      cities: {}, // 城市数据
      counties: {}, // 县区数据
      availableCities: [], // 当前省份可选的城市
      availableCounties: [], // 当前城市可选的县区
      step1: [
        "unitHospitalName",
        "applicantName",
        "educationType",
        "batchName",
        "batchDate",
        "durationName",
        "durationMoney",
        "durationStartDate",
        "educationAskObjective",
      ],
      step2: [
        "userName",
        "gender",
        "nation",
        "profession",
        "politicalOutlook",
        "healthCondition",
        "technicalTitle",
        "duties",
        "idCardType",
        "idCard",
        "birthday",
        "age",
        "highestDegree",
        "graduateSchool",
        "startWorking",
        "doctorCertificateDate",
        "doctorCertificateNumber",
        "practicingCertificateNumber",
        "engagedRadiatePost",
        "phoneNumber",
        "email",
        "workTelephone",
        "zipCode",
        "unitLevel",
        "hospitalLevel",
        "unitName",
        "unitProvince",
        "unitCity",
        "unitDistrict",
        "unitAddress",
        "politicalRepresentation",
        "proposedMajor",
      ],
      step3: [
        "registerApplicationForm",
        "diploma",
        "medicalInstitutionLevel",
        "qualification",
        "practicingCertificate",
        "practiceResult",
        "professionalTitleCertificate",
        "idCardFront",
        "idCardBack",
        "electronicIdPhoto",
        "otherAttachment",
      ],
    };
  },
  created() {
    this.form.registerYear = new Date().getFullYear();
    this.getRegisterInfo(this.$route.query.id);
  },
  mounted() {
    this.getArea();
  },
  computed: {
    checkId() {
      console.log(
        "调用checkId计算属性，检查招生信息ID:",
        this.form.registerNeedId
      );
      return checkregisterNeedId(this.form.registerNeedId);
    },
  },
  methods: {
    getArea() {
      getArea().then((response) => {
        this.provinces = response.data;
        console.log(this.provinces);
      });
    },
    // 当省份改变时，更新可选城市列表
    provinceChange(province) {
      this.form.unitCity = "";
      this.form.unitDistrict = "";
      let selectedProvince = this.provinces.find(
        (item) => item.id === province
      );
      if (selectedProvince) {
        this.form.unitProvince = selectedProvince.extName;
      }
      this.unitCodes[0] = province;
      //如果第二个和第三个有值就删掉
      if (this.unitCodes[1]) {
        this.unitCodes.splice(1, 1);
      }
      if (this.unitCodes[2]) {
        this.unitCodes.splice(2, 1);
      }
      getChildArea(province).then((response) => {
        console.log(response);
        this.availableCities = response.data;
      });
    },
    // 当城市改变时，更新可选县区列表
    cityChange(city) {
      this.form.unitDistrict = "";
      let selectedCity = this.availableCities.find((item) => item.id === city);
      if (selectedCity) {
        this.form.unitCity = selectedCity.extName;
      }
      this.unitCodes[1] = city;
      //如果第三个有值就删掉
      if (this.unitCodes[2]) {
        this.unitCodes.splice(2, 1);
      }
      getChildArea(city).then((response) => {
        console.log(response);
        this.availableCounties = response.data;
      });
    },
    //选择区县时
    contryChange(contry) {
      let selectedcontry = this.availableCounties.find(
        (item) => item.id === contry
      );
      this.unitCodes[2] = contry;
      if (selectedcontry) {
        this.form.unitDistrict = selectedcontry.extName;
      }
    },
    validateDateRange(rule, value, callback) {
      if (!value || value.length !== 2) {
        callback(new Error("请选择开始和结束时间"));
      } else if (value[0] > value[1]) {
        callback(new Error("开始时间不能晚于结束时间"));
      } else {
        callback();
      }
    },
    changeDate(event, index) {
      if (event) {
        this.registerWorkVoList[index].endDate = null;
      }
    },
    handleDateChangeWork(index) {
      const work = this.registerWorkVoList[index];
      console.log(work);
      // 结束时间不能小于开始时间 开始时间startDate 结束时间endDate
      if (work.endDate && work.startDate) {
        if (work.endDate < work.startDate) {
          this.$message.error("结束时间不能小于开始时间");
          work.endDate = null;
        }
      }
    },
    // 学习经历的时间处理
    handleDateChange(index) {
      const learn = this.registerLearnVoList[index];
      if (learn.startDate) {
        learn.startDate = formatDate(learn.startDate);
      }
      if (learn.endDate) {
        learn.endDate = formatDate(learn.endDate);
      }
      // 结束时间不能小于开始时间 开始时间startDate 结束时间endDate
      if (learn.endDate && learn.startDate) {
        if (
          new Date(learn.endDate).getTime() <
          new Date(learn.startDate).getTime()
        ) {
          this.$modal.msgError("结束时间不能小于开始时间");
          learn.endDate = null;
        }
      }
    },

    getInfo(id) {
      getRegisterNeed(id).then((response) => {
        this.entity = response.data;
        console.log(response.data);
        this.registerlearnvoList = response.data.registerLearnVoList;
        this.form.registerDeptId = this.entity.registerDeptId;
        this.form.registerTypeId = this.entity.registerTypeId;
        this.batchList = response.data.batchNameList.split(",");
        const needNameList = response.data.needNameList
          ? response.data.needNameList.split(",")
          : [];
        let batchNameList = [];
        for (let i = 0; i < this.batchList.length; i++) {
          // 时间段外不显示
          let date = response.data.batchDateList
            ? response.data.batchDateList.split(",")[i]
            : "";
          // 使用 needNameList 中的年份
          let year = needNameList[i] || new Date().getFullYear();

          batchNameList.push({
            name: this.batchList[i],
            date: date,
            year: year, // 使用 needNameList 的年份
            useStatus: this.isCurrDateRange(date),
          });
        }
        this.batchNameList = batchNameList;
        console.log(this.batchNameList);

        // 如果已经选择了批次，根据批次设置年份
        if (this.form.batchName) {
          const selectedBatch = batchNameList.find(item => item.name === this.form.batchName);
          if (selectedBatch && selectedBatch.year) {
            this.currYear = selectedBatch.year;
            console.log("根据已选批次设置年份:", this.currYear);
          }
        }

        this.durationList = response.data.durationNameList.split(",");
        let durationNameList = [];
        for (let i = 0; i < this.durationList.length; i++) {
          durationNameList.push({
            name: this.durationList[i],
            money: response.data.durationMoneyList
              ? response.data.durationMoneyList.split(",")[i]
              : "",
          });
        }

        this.month = Number(durationNameList[0].name.match(/\d+/)[0]);

        this.durationNameList = durationNameList;
        this.handleDurationDate();
      });
    },
    batchNameChange(e) {
      for (let i = 0; i < this.batchNameList.length; i++) {
        let item = this.batchNameList[i];
        if (e == item.name) {
          this.form.batchDate = item.date;
          // 更新当前年份为选中批次的年份
          this.currYear = item.year || new Date().getFullYear();
          console.log("批次变更，更新年份为:", this.currYear, "批次:", e);
          break;
        }
      }
      this.handleDurationDate();
    },
    // 进修期限
    durationNameChange(e) {
      for (let i = 0; i < this.durationNameList.length; i++) {
        let item = this.durationNameList[i];
        if (e == item.name) {
          this.form.durationMoney = item.money;
          break;
        }
      }
      this.month = Number(e.match(/\d+/)[0]);

      this.handleDurationDate();
      // this.durationStartDateChange(this.form.durationStartDate)
    },
    durationStartDateChange(e) {
      console.log(e);
      try {
        if (this.form.durationName) {
          let date = new Date(e);
          date.setMonth(date.getMonth() + this.month);
          this.$set(
            this.form,
            "durationEndDate",
            date.toISOString().slice(0, 7).replace("-", "/")
          );
          console.log(date.toISOString().slice(0, 7).replace("-", "/"));
        } else {
          this.$modal.msgError("请先选择进修期限");
          return false;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 计算进修开始、结束时间 (兼容 Safari)
    handleDurationDate() {
      console.log("计算进修时间 - 当前年份:", this.currYear, "批次:", this.form.batchName, "期限:", this.form.durationName);

      if (!this.form.batchName || !this.form.durationName) {
        // Need batch and duration to calculate
        this.form.durationStartDate = null;
        this.form.durationEndDate = null;
        return;
      }

      const monthToDate = {
        "1月": 1,
        "2月": 2,
        "3月": 3,
        "4月": 4,
        "5月": 5,
        "6月": 6,
        "7月": 7,
        "8月": 8,
        "9月": 9,
        "10月": 10,
        "11月": 11,
        "12月": 12,
      };

      const startMonthIndex = monthToDate[this.form.batchName] - 1; // 0-indexed for Date object
      if (isNaN(startMonthIndex)) {
        console.error(
          "Invalid batchName for date calculation:",
          this.form.batchName
        );
        this.form.durationStartDate = null;
        this.form.durationEndDate = null;
        return;
      }

      const startYear = this.currYear;
      const startDateObj = new Date(startYear, startMonthIndex, 1); // Use numeric constructor

      // Format Start Date consistently (YYYY/MM)
      const startMonthFormatted = String(startDateObj.getMonth() + 1).padStart(
        2,
        "0"
      ); // Back to 1-indexed for display
      this.form.durationStartDate = `${startYear}/${startMonthFormatted}`;
      console.log("Calculated Start Date:", this.form.durationStartDate);

      // Calculate End Date
      if (this.form.durationName.includes("天")) {
        // --- Calculate by Days ---
        this.durationNameType = 2;
        const daysToAdd = parseInt(
          this.form.durationName.replace("天", ""),
          10
        );
        if (isNaN(daysToAdd)) {
          console.error("Invalid durationName (days):", this.form.durationName);
          this.form.durationEndDate = null;
          return;
        }

        const endDateObj = new Date(startYear, startMonthIndex, 1); // Start from day 1
        endDateObj.setDate(endDateObj.getDate() + daysToAdd - 1); // Add days (adjust because we start at day 1)

        // Format End Date (YYYY/MM/DD)
        const endYear = endDateObj.getFullYear();
        const endMonth = String(endDateObj.getMonth() + 1).padStart(2, "0");
        const endDay = String(endDateObj.getDate()).padStart(2, "0");
        this.form.durationEndDate = `${endYear}/${endMonth}/${endDay}`;
        console.log("按天算 End Date:", this.form.durationEndDate);
        // this.durationDateList = [this.form.durationStartDate + '/01', this.form.durationEndDate]; // Keep YYYY/MM/DD format if needed elsewhere
      } else if (this.form.durationName.includes("个月")) {
        // --- Calculate by Months ---
        this.durationNameType = 1;
        const monthsToAdd = parseInt(
          this.form.durationName.replace("个月", ""),
          10
        );
        if (isNaN(monthsToAdd)) {
          console.error(
            "Invalid durationName (months):",
            this.form.durationName
          );
          this.form.durationEndDate = null;
          return;
        }

        const endDateObj = new Date(startYear, startMonthIndex, 1);
        // Adjust month calculation: End month is Start Month + Duration Months - 1
        endDateObj.setMonth(endDateObj.getMonth() + monthsToAdd - 1);

        // Format End Date (YYYY/MM)
        const endYear = endDateObj.getFullYear();
        // Get month, adjust back to 1-indexed, pad
        const endMonth = String(endDateObj.getMonth() + 1).padStart(2, "0");
        this.form.durationEndDate = `${endYear}/${endMonth}`;
        console.log(
          "按月算 End Date:",
          this.form.durationStartDate,
          this.form.durationEndDate
        );
        // this.durationDateList = [this.form.durationStartDate, this.form.durationEndDate]; // Keep YYYY/MM format if needed
      } else {
        console.error("Unknown durationName format:", this.form.durationName);
        this.form.durationEndDate = null;
      }
    },

    // 进修时间 (This method might be redundant now if handleDurationDate sets start/end directly)
    durationDateChange() {
      if (this.durationDateList.length == 2) {
        this.form.durationStartDate = this.durationDateList[0];
        this.form.durationEndDate = this.durationDateList[1];
      }
    },
    //上一步
    stepActivePrev() {
      this.stepActive--;
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    // 下一步
    stepActiveNext() {
      if (this.stepActive == 1) {
        const resArr = [];
        this.$refs["form"].validateField(this.step1, (valid) => {
          console.log(valid);
          if (valid) {
            resArr.push(false);
          } else {
            resArr.push(true);
          }
        });
        console.log(resArr);
        if (resArr.includes(false)) {
          this.$modal.msgError("请先完善表单信息");
          return;
        } else {
          this.stepActive++;
          window.scrollTo({ top: 0, behavior: "smooth" });
          return;
        }
      }
      if (this.stepActive == 2) {
        const resArr = [];
        this.$refs["form"].validateField(this.step2, (valid) => {
          console.log(valid);
          if (valid) {
            resArr.push(false);
          } else {
            resArr.push(true);
          }
        });
        console.log(resArr);
        if (resArr.includes(false)) {
          this.$modal.msgError("请先完善表单信息");
          return;
        } else {
          if (this.registerLearnVoList.length == 0) {
            this.$modal.msgError("请添加学习经历");
            return;
          } else {
            for (let i = 0; i < this.registerLearnVoList.length; i++) {
              let item = this.registerLearnVoList[i];
              if (
                isEmpty(item.startDate) ||
                isEmpty(item.endDate) ||
                isEmpty(item.schoolName) ||
                isEmpty(item.professionName) ||
                isEmpty(item.designationName) ||
                isEmpty(item.education) ||
                (item.education !== "专科" && isEmpty(item.academicDegree))
              ) {
                this.$modal.msgError("请完善第" + (i + 1) + "条学习经历");
                return;
              }
            }
          }
          if (this.registerWorkVoList.length == 0) {
            this.$modal.msgError("请添加工作经历");
            return;
          } else {
            for (let i = 0; i < this.registerWorkVoList.length; i++) {
              let item = this.registerWorkVoList[i];
              if (
                isEmpty(item.startDate) ||
                isEmpty(item.hospitalName) ||
                isEmpty(item.deptName) ||
                isEmpty(item.technicalTitle) ||
                isEmpty(item.duties) ||
                isEmpty(item.hospitalTwoLevel) ||
                isEmpty(item.hospitalLevel)
              ) {
                this.$modal.msgError("请完善第" + (i + 1) + "条工作经历");
                return;
              }
            }
          }
          this.stepActive++;
          window.scrollTo({ top: 0, behavior: "smooth" });
          return;
        }
      }
    },
    // 学习经历
    registerLearnAdd() {
      let i = this.registerLearnVoList.length;
      if (i > 0) {
        let item = this.registerLearnVoList[i - 1];
        if (
          isEmpty(item.startDate) ||
          isEmpty(item.endDate) ||
          isEmpty(item.schoolName) ||
          isEmpty(item.professionName) ||
          isEmpty(item.designationName) ||
          isEmpty(item.education) ||
          (item.education !== "专科" && isEmpty(item.academicDegree))
        ) {
          this.$modal.msgError("请完善第" + i + "条学习经历");
          return;
        }
      }
      this.registerLearnVoList.push({
        startDate: null,
        endDate: null,
        schoolName: null,
        professionName: null,
        designationName: null,
        education: null,
        academicDegree: null,
      });
    },
    educationChange(index) {
      if (this.registerLearnVoList[index].education != "专科") {
        this.registerLearnVoList[index].academicDegree = null;
      }
    },
    registerLearnDelete(index) {
      this.registerLearnVoList.splice(index, 1);
    },
    // 工作经历
    registerWorkAdd() {
      let i = this.registerWorkVoList.length;
      if (i > 0) {
        let item = this.registerWorkVoList[i - 1];
        if (
          isEmpty(item.startDate) ||
          isEmpty(item.hospitalName) ||
          isEmpty(item.deptName) ||
          isEmpty(item.technicalTitle) ||
          isEmpty(item.duties) ||
          isEmpty(item.hospitalTwoLevel) ||
          isEmpty(item.hospitalLevel)
        ) {
          this.$modal.msgError("请完善第" + i + "条工作经历");
          return;
        }
      }
      this.registerWorkVoList.push({
        startDate: null,
        endDate: null,
        hospitalLevel: null,
        hospitalName: null,
        deptName: null,
        technicalTitle: null,
        duties: null,
        isToDate: false,
      });
    },
    registerWorkDelete(index) {
      this.registerWorkVoList.splice(index, 1);
    },
    // 外语水平
    registerLanguageAdd() {
      let i = this.form.registerLanguageVoList.length;
      if (i > 0) {
        let item = this.form.registerLanguageVoList[i - 1];
        if (
          isEmpty(item.languages) ||
          isEmpty(item.literacy) ||
          isEmpty(item.listenAndSpeak)
        ) {
          this.$modal.msgError("请完善第" + i + "条外语水平");
          return;
        }
      }
      this.form.registerLanguageVoList.push({
        languages: null,
        literacy: null,
        listenAndSpeak: null,
      });
    },
    registerLanguageDelete(index) {
      this.form.registerLanguageVoList.splice(index, 1);
    },
    // 查询报名信息
    async getRegisterInfo(id) {
      await getRegisterInfo(id).then((response) => {
        this.form = response.data;
        this.registerLearnVoList = JSON.parse(
          JSON.stringify(response.data.registerLearnVoList)
        );
        let registerWorkVoList = JSON.parse(
          JSON.stringify(response.data.registerWorkVoList)
        );
        registerWorkVoList.forEach((element) => {
          element.isToDate = element.endDate == null ? true : false;
        });
        this.registerWorkVoList = registerWorkVoList;
        if (this.form.registerNeedId) {
          this.getInfo(this.form.registerNeedId);
        }

        if (response.data.unitCodes) {
          this.unitCodes = response.data.unitCodes.split(",");
          this.form.unitProvince = response.data.unitCodes.split(",")[0];

          this.form.unitCity = response.data.unitCodes.split(",")[1];
          getChildArea(this.form.unitProvince).then((response) => {
            this.availableCities = response.data;
          });
          this.form.unitDistrict = response.data.unitCodes.split(",")[2];
          getChildArea(this.form.unitCity).then((response) => {
            this.availableCounties = response.data;
          });
        }
      });
    },
    stopForm() {
      this.form.auditStatus = 0;
      this.saveForm();
    },
    submitForm() {
      if (this.stepActive == 3) {
        const resArr = [];
        this.$refs["form"].validateField(this.step3, (valid) => {
          console.log(valid);
          if (valid) {
            resArr.push(false);
          } else {
            resArr.push(true);
          }
        });
        console.log(resArr);
        if (resArr.includes(false)) {
          this.noticeShow = false;

          this.$modal.msgError("请先完善表单信息");
          return;
        } else {
          this.form.auditStatus = 1;
          this.saveForm();
        }
      }
    },
    saveForm() {
      this.submitLoading = true;
      this.form.registerLearnVoList = this.registerLearnVoList;
      this.form.registerWorkVoList = this.registerWorkVoList;
      const selectedBatch = this.batchNameList.find(
        (item) => item.name === this.form.batchName
      );
      if (selectedBatch) {
        this.form.batchDate = selectedBatch.date;
      }
      this.unitCodes.forEach((item, index) => {
        if (item != "" && item != null) {
          this.form.unitCodes = this.unitCodes.join(",");
        }
      });
      let selectedProvince = this.provinces.find(
        (item) => item.id === this.unitCodes[0]
      );
      if (selectedProvince) {
        this.form.unitProvince = selectedProvince.extName;
      }
      let selectedCity = this.availableCities.find(
        (item) => item.id === this.unitCodes[1]
      );
      if (selectedCity) {
        this.form.unitCity = selectedCity.extName;
      }
      let selectedcontry = this.availableCounties.find(
        (item) => item.id === this.unitCodes[2]
      );
      if (selectedcontry) {
        this.form.unitDistrict = selectedcontry.extName;
      }
      addRegisterInfo(this.form)
        .then((response) => {
          this.submitLoading = false;
          if (this.form.auditStatus == 0) {
            this.getRegisterInfo(response.data);
            this.$modal.msgSuccess("暂存成功");
            this.$router.push("/apply");
          } else {
            this.finishShow = true;
            this.$modal.msgSuccess("提交成功");
          }
        })
        .catch(() => {
          this.submitLoading = false;
        });
    },
    // 下载申请表模板
    downloadApplyTemplate() {
      console.log("下载申请表模板");
      this.form.registerLearnVoList = this.registerLearnVoList;
      this.form.registerWorkVoList = this.registerWorkVoList;
      try {
        this.form.auditStatus = 0;
        let selectedProvince = this.provinces.find(
          (item) => item.id === this.unitCodes[0]
        );
        if (selectedProvince) {
          this.form.unitProvince = selectedProvince.extName;
        }
        let selectedCity = this.availableCities.find(
          (item) => item.id === this.unitCodes[1]
        );
        if (selectedCity) {
          this.form.unitCity = selectedCity.extName;
        }
        let selectedcontry = this.availableCounties.find(
          (item) => item.id === this.unitCodes[2]
        );
        if (selectedcontry) {
          this.form.unitDistrict = selectedcontry.extName;
        }
        addRegisterInfo(this.form).then(async (response) => {
          await this.getRegisterInfo(response.data);
          this.$loading({
            lock: true,
            text: "下载中,请稍等",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.1)",
          });

          fetch(
            this.baseURL +
              "/business/registerPerson/downloadApplyTemplate?id=" +
              this.form.id
          )
            .then((response) => response.blob())
            .then((blob) => {
              const a = document.createElement("a");
              const objectUrl = URL.createObjectURL(blob);
              a.href = objectUrl;
              a.download = "进修申请表.pdf";
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
              URL.revokeObjectURL(objectUrl);
            })
            .finally(() => {
              this.$loading().close();
            });
        });
      } catch (error) {
        console.log(error);
      }
    },
    isCurrDateRange(dateStr) {
      if (!dateStr || dateStr.indexOf("-") === -1) return false;

      let startStr, endStr;
      // 使用正则表达式匹配日期时间格式
      // 格式：2025/01/01 00:00:00-2025/11/01 23:59:59
      const match = dateStr.match(/^(.+?\d{2}:\d{2}:\d{2})-(.+?\d{2}:\d{2}:\d{2})$/);
      if (match) {
        startStr = match[1];
        endStr = match[2];
      } else {
        // 如果没有匹配到时间格式，尝试简单的日期格式
        [startStr, endStr] = dateStr.split("-");
      }

      // 将日期字符串转换为 Safari 支持的格式（YYYY/MM/DD）
      const formatDateStr = (str) => {
        // 移除时间部分，只保留日期
        const dateOnly = str.trim().split(' ')[0];
        return dateOnly.replace(/-/g, "/");
      };

      // 解析日期范围
      const startDate = new Date(formatDateStr(startStr));
      const endDate = new Date(formatDateStr(endStr));
      // 将结束日期设置为当天的 23:59:59
      endDate.setHours(23, 59, 59, 999);

      const currentDate = new Date();

      // 判断当前日期是否在范围内
      return currentDate >= startDate && currentDate <= endDate;
    },
    finishSuccess() {
      this.$router.push("/apply");
    },
    finishCancel() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.main2-container {
  width: 1200px;
  margin-left: calc((100% - 1200px) / 2);
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 15px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 5px 5px 10px 0 rgba(157, 156, 156, 0.1);
}

::v-deep .el-range-editor.el-input__inner {
  width: 100%;
}

.header-title {
  background-color: #eee;
  height: 50px;
  line-height: 50px;
  font-weight: bolder;
  font-size: 18px;
  padding-left: 15px;
  border-left: 6px solid #a52529;
  border-radius: 5px;
  margin-bottom: 15px;
  display: flex;

  .desc {
    font-size: 16px;
    font-weight: normal;

    .red {
      color: #a52529;
    }
  }

  .download {
    color: #409eff;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
  }
}

.image-box {
  padding-bottom: 0;
}

.item-box {
  border-bottom: 3px dotted #ebeef5;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.notice {
  .title {
    margin-top: 15px;
    font-size: 28px;
    font-weight: 600;
    color: #333;
  }

  .content {
    font-size: 20px;
    text-align: center;
    margin-top: -10px;
    border-top: 3px dotted #ebeef5;
    border-bottom: 3px dotted #ebeef5;
    padding: 20px;
    color: rgb(51, 51, 51);
    line-height: 36px;
  }
}

.bottom-box {
  width: 1200px;
  margin-left: calc((100% - 1400px) / 2);
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 15px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 5px 5px 10px 0 rgba(157, 156, 156, 0.1);
  z-index: 1;
  position: fixed;
  bottom: 0;
  border: 1px solid #ebeef5;
}
</style>
